import React from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import { useNavigate } from "umi";
import { userLogin } from "@/api";
import HomeHeader from "../home/components/HomeHeader";
import "./style.scss";
export default function index() {
  const navigate = useNavigate();
  const _userLogin = (params: { username: string; pwd: string }) => {
    userLogin({
      ...params,
      deviceId: 123,
      deviceName: "电视",
    }).then((res) => {
      if (res.data.code === 0) {
        // 将token 缓存
        localStorage.setItem("token", res.data.data.token);
        Toast.show({
          content: "登录成功",
          afterClose: () => {
            // 去首页
            navigate("/home", { replace: true });
          },
        });
      }
    });
  };
  return (
    <div>
      <HomeHeader className='login-header'/>
      <div className="form-all">
        <Form className="form-login" onFinish={_userLogin}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              {
                required: true,
                message: "用户名必填",
              },
              {
                pattern: /^[a-zA-Z]\w{3,11}$/,
                message: "用户名必须由4-12位英文数字下划线组成,必须字母开头",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="pwd" label="密码">
            <Input type="password" />
          </Form.Item>
          <Form.Item>
            <Button type="submit" color="primary">
              登录
            </Button>
            <Button type="reset" color="primary">
              重置
            </Button>
          </Form.Item>
        </Form>
        <Button
          onClick={() => {
            navigate("/reg");
          }}
        >
          去注册页
        </Button>
      </div>
    </div>
  );
}
